본문으로 건너뛰기

Props 소개와 좋은 Props 이름

Props란 무엇인가요?​

React에서 "Props"는 컴포넌트 간에 데이터를 전달하는 중요한 수단입니다. Props는 "Properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용됩니다. Props를 이용하면 컴포넌트 간에 데이터와 함수 등을 주고받을 수 있어, 컴포넌트를 재사용 가능하고 효율적으로 관리할 수 있습니다.

Props는 컴포넌트에 읽기 전용(read-only) 속성으로 전달되며, 컴포넌트 내에서 변경할 수 없습니다. 이는 컴포넌트의 일관성을 유지하고, 데이터 흐름을 명확하게 이해할 수 있도록 도와줍니다.

Props의 사용법​

간단한 예제로 Props를 사용하는 방법을 살펴보겠습니다. 다음은 부모 컴포넌트에서 자식 컴포넌트로 이름과 메시지를 전달하는 예시입니다.

// 부모 컴포넌트
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="John" message="Welcome to React!" />
    </div>
  );
}

export default App;

// 자식 컴포넌트
import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
    </div>
  );
}

export default Greeting;

위 예제에서 App 컴포넌트는 Greeting 컴포넌트에 name과 message라는 두 가지 Props를 전달합니다. Greeting 컴포넌트는 props 객체를 통해 이 값을 받아와 화면에 표시합니다.

좋은 Props 이름의 중요성​

Props 이름을 잘 정하는 것은 코드를 더 읽기 쉽고 유지보수하기 쉽게 만듭니다. 좋은 Props 이름은 해당 값이 무엇을 의미하는지 명확히 전달할 수 있어야 합니다.

좋은 Props 이름의 예시​

  • 명확하고 구체적인 이름: userName, userAge, isLoggedIn과 같이 Props의 역할이 명확히 드러나는 이름을 사용합니다.
  • 일관된 작명 규칙: 프로젝트 전반에 걸쳐 일관된 작명 규칙을 적용합니다. 예를 들어, isSomething, hasSomething과 같이 boolean 값을 나타내는 이름은 일관되게 사용합니다.

나쁜 Props 이름의 예시​

  • 모호한 이름: data, info, item과 같이 Props의 구체적인 의미가 드러나지 않는 이름은 피합니다.
  • 약어 사용: 약어는 직관적으로 이해하기 어려울 수 있으므로, 가능한 한 피합니다.

Props로 데이터 전달 시 주의할 점​

  • 불변성 유지: Props는 읽기 전용으로 전달되므로, 자식 컴포넌트에서 Props를 변경하려고 하면 안 됩니다. 상태를 변경해야 한다면 부모 컴포넌트에서 상태를 관리하고, 상태 변경 함수를 Props로 전달해야 합니다.
  • 필요한 데이터만 전달: 불필요한 Props는 컴포넌트의 복잡성을 증가시키므로, 꼭 필요한 데이터만 전달합니다.

더 알아보기​

내용 요약과 다음 주제​

Props는 컴포넌트 간에 데이터를 전달하는 중요한 수단으로, 명확하고 일관된 이름을 사용하는 것이 중요합니다. Props는 읽기 전용이므로 불변성을 유지해야 하며, 필요한 데이터만 전달하는 것이 좋습니다. 다음 주제인 State와 Props의 차이점에서는 상태와 Props의 역할과 차이점, 각각의 사용법에 대해 자세히 알아보겠습니다.